<template>
  <c-card>
    <el-button :loading="loading" @click="queryImages">查询图片</el-button>
    <el-button :loading="loading" @click="updateImages">开始修改图片</el-button>
    <el-button :loading="loading" @click="deleteImages">删除错误图片</el-button>

    <p>count:{{ count }}</p>
    <p>length:{{ imageIds.length }}</p>
  </c-card>
</template>

<script setup name="error-correc">
import { ref, computed, onMounted } from 'vue';
import { queryUrl, updateUrl, deleteErrUrl } from '@/apis/error-correc';

const imageIds = ref([]);
const count = ref([]);
const loading = ref(false);
const queryImages = async () => {
  loading.value = true;
  const res = await queryUrl({ size: imageIds.value.length });
  imageIds.value = imageIds.value.concat(res.data);
  count.value = count.value.concat(res.count);
  loading.value = false;

  console.log(imageIds.value, 'imageIds.value');
};

const indexFind = (url) => {
  const findList = [
    '/images-upload/',
    '/user-images-upload/',
    '/user-images-upload-dev/',
    '/images-upload-dev/',
  ];

  const idx = findList.findIndex((v) => url.indexOf(v) != -1);

  return findList[idx];
};

const updateImages = async () => {
  for (const item of imageIds.value) {
    const images = item.images.map((v) => {
      const content = indexFind(v.url);
      const newUrl = v.url.replace(content, '/images-static/');
      console.log(content, newUrl, 'content');
      return { ...v, url: newUrl };
    });

    console.log(images, 'images');

    const res = await updateUrl({ _id: item._id, images });
  }

  // const url = imageIds.value[0].images[0].url;

  // const content = indexFind(url);

  // const newContent = url.replace(content, '/images-static/');

  // console.log(content, newContent, 'content');

  // console.log(url.split('/'));
  // const urlSplit = url.split('/');
  // const index = urlSplit.findIndex((v) => v.indexOf('images-upload') != -1);
  // console.log(index, 'index');
};

const deleteImages = () => {
  deleteErrUrl({ url: '' });
};

onMounted(() => {
  // rowDrop();
  // columnDrop();
});
</script>

<style lang="scss" scoped></style>
